<template>
	<view class="kui-w-full kui-h-full">
		<kui-page :custom-header="false">
			<template v-slot:body>
				<view class="kui-w-full kui-h-full">
					<view class="kui-my-3 kui-h-full kui-flex kui-items-center">
						<kui-text>暗黑模式：</kui-text>
						<kui-switch v-model="baseState.state.checked" @change="changeMode"></kui-switch>
					</view>
					<kui-space :gap="[30,0]" direction="column">
						<kui-cell-group title="基本用法">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group v-model="baseState.state.value" @change="baseState.methods.onChange">
											<kui-radio :value="1">苹果</kui-radio>
											<kui-radio :value="2" disabled>橘子</kui-radio>
											<kui-radio :value="3">香蕉</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group label-position="left" v-model="baseState.state.value" @change="baseState.methods.onChange">
											<kui-radio :value="1">苹果</kui-radio>
											<kui-radio :value="2" disabled>橘子</kui-radio>
											<kui-radio :value="3">香蕉</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="横向用法">
							<view class="kui-rounded kui-p-3 kui-bg-white" :style="{
								backgroundColor: baseState.state.mode === 'dark' ? theme.colors[baseState.state.mode]['grey'][2] : ''
							}">
								<view>
									<kui-radio-group v-model="baseState.state.value" direction="row" @change="baseState.methods.onChange">
										<kui-radio :value="1">苹果</kui-radio>
										<kui-radio :value="2" disabled>橘子</kui-radio>
										<kui-radio :value="3">香蕉</kui-radio>
									</kui-radio-group>
								</view>
								<view class="kui-border-0 kui-border-b kui-border-solid kui-border-gray-100 kui-my-3"></view>
								<view>
									<kui-radio-group label-position="left" v-model="baseState.state.value" direction="row" @change="baseState.methods.onChange">
										<kui-radio :value="1">苹果</kui-radio>
										<kui-radio :value="2" disabled>橘子</kui-radio>
										<kui-radio :value="3">香蕉</kui-radio>
									</kui-radio-group>
								</view>
							</view>
						</kui-cell-group>
						<kui-cell-group title="自定义图标">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group v-model="baseState.state.value" @change="baseState.methods.onChange">
											<kui-radio active-icon="check_circle" inactive-icon="check_circle_outline" :value="1">自定义图标1</kui-radio>
											<kui-radio active-icon="check_circle" inactive-icon="check_circle_outline" :value="2">自定义图标1</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group label-position="left" v-model="baseState.state.value" @change="baseState.methods.onChange">
											<kui-radio active-icon="radio-checked" :value="1">自定义图标2</kui-radio>
											<kui-radio active-icon="radio-checked" :value="2">自定义图标2</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="自定义图标大小">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group v-model="baseState.state.value" @change="baseState.methods.onChange">
											<kui-radio :icon-size="40" :value="1">自定义图标大小40</kui-radio>
											<kui-radio :icon-size="40" :value="2">自定义图标大小40</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="自定义图标颜色">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group v-model="baseState.state.value" @change="baseState.methods.onChange">
											<kui-radio active-color="blue" inactive-color="danger" :value="1">自定义图标大小40</kui-radio>
											<kui-radio active-color="blue" inactive-color="danger" :value="2">自定义图标大小40</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="change监听">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<view class="kui-flex kui-flex-col">
										<kui-radio-group v-model="baseState.state.value" @change="baseState.methods.onChange('change', $event)">
											<kui-radio :value="1">选项1</kui-radio>
											<kui-radio :value="2">选项2</kui-radio>
										</kui-radio-group>
									</view>
								</template>
							</kui-cell>
						</kui-cell-group>
					</kui-space>
				</view>
			</template>
		</kui-page>
		<kui-toast v-model:show="baseState.state.toast.show" :content="baseState.state.toast.content"></kui-toast>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		getCurrentInstance
	} from 'vue';
	
	export default {
		setup() {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const baseState = {
				state: reactive({
					value: 1,
					toast: {
						show: false,
						content: ''
					},
					checked: false,
					mode: 'light'
				}),
				methods: {
					onChange(type: string = 'base', e: Event) {
						if (type === 'change') {
							const content = `当前选中值：${e}`;
							baseState.state.toast.content = content;
							baseState.state.toast.show = true;
						}
					}
				}
			};
			
			const changeMode = () => {
				baseState.state.mode = baseState.state.mode == "light" ? "dark" : "light";
				
				uni.$emit("changeMode", baseState.state.mode);
			};
			
			return {
				theme,
				baseState,
				changeMode
			}
		}
	}
</script>

<style>

</style>
